<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/css/person/fontawesome/css/font-awesome.css">
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	<!-- 引入样式 -->
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	<!-- 引入组件库 -->
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .personContainer {
        position: relative;
        left: 30px;
        top: 30px;

    }

    .headImg {
        display: inline-block;
    }

    .headImg img {
        width: 80px;
        height: 80px;
    }

    .content {
        position: absolute;
        width: 590px;
        line-height: 40px;
        height: 240px;
        top: 0px;
        left: 100px;
    }

    .username {
        width: 580px;
        border-bottom: 2px dotted #ccc;
        line-height: 40px;
    }

    #username {
        font-size: 14px;
        font-weight: bold;
    }

    .userInfo {
        font-size: 14px;
    }

    .userInfo i {
        color: #ccc;
        font-size: 18px;
        display: inline-block;
        width: 30px;
        text-align: center;
    }

    .userInfo span {
        color: red;
        font-weight: bold;
    }

    .userInfo a {
        font-size: 12px;
        margin-left: 5px;
        color: #ccc;
    }

    .userInfo .bottomItem {
        padding-left: 20px;
        width: 560px;
        height: 40px;
        background-color:#f1f2f6 ;
        font-size: 12px;
        margin-top: 10px;
        border:1px solid #ccc
    }
    .userInfo .bottomItem i{
        width: 20px;
        font-size: 12px;
    }
    .userInfo .bottomItem a{
        color: #666;
    }
    .line{
        position: absolute;
        left: 30px;
        top: 240px;
        border-bottom: 2px dotted #ccc;
        width: 650px;

    }
    .submit{
        position: absolute;
        top: 55px;
        left: 577px;
        text-align: right;
    }
    .submit .upTicket{
        width: 80px;
        height: 28px;
        background-color: #f6e58d;
        font-size: 12px;
        border-radius:3px;
        border:1px solid #ccc;
        transition: 0.2s;
    }
    .submit .upTicket:hover{
        background-color: #ffeaa7;
        cursor: pointer;
    }
    .submit .howToGetTicket{
        font-size: 14px;
        height: 20px;
        line-height: 20px;
        margin-top: 10px;
        color: #8c8c8c;
        cursor: pointer;
    }
    .submit .howToGetTicket span{
        font-size: 18px;

    }
    .submit .getTicketInfo{
        position: absolute;
        top: 60px;
        left: -87px;
        width: 190px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        border: 1px solid #ccc;
        font-size: 14px;
        color: #ccc;
        display: none;
    }
</style>
<body>
	<div class="personContainer" id="person">
		
		<!--用户头像-->
		<div class="headImg">
			<a @click="headImagsVisible=true">
				<img :src="'http://localhost:8081/imgs/headImg/'+userInfo.avatar">
			</a>
			
		</div>
		<div class="content">
			
			<!--用户昵称-->
			<div class="username">
				<span id="username">{{userInfo.nickname}}</span>
			</div>
			
			<!--用户订阅信息-->
			<div class="userInfo">
				<div class="item"><i class="fa fa-eercast"></i>我的点券：<span>{{userInfo.pointTicket}}</span></div>
				<div class="item"><i class="fa fa-snowflake-o"></i>我的阅点：<span>{{userInfo.readPoint}}</span></div>
				<div class="item"><i class="fa fa-superpowers"></i>我的月票：<span>{{userInfo.monthTicket}}</span><span>张</span>
				</div>
				<div class="bottomItem">
					我的书架：<span>{{total[1]}}</span>部 &nbsp;&nbsp;&nbsp;购买作品数：<span>{{total[0]}}</span>部 &nbsp;&nbsp;&nbsp;
				</div>
			</div>
		</div>
		
		<!--充值相关-->
		<div class="submit">
			<button class="upTicket">充值点券</button>
			<div class="howToGetTicket" id="howToGetTicket">如何获得月票 <span class="fa fa-question-circle-o"></span></div>
			<div class="getTicketInfo" id="getTicketInfo">下载腾讯动漫APP可购买月票</div>
		</div>
		<div class="line"></div>
		<div>
			<el-dialog title="更换头像" :visible.sync="headImagsVisible" size="mini" :close-on-click-modal='false'>
				<el-upload
						class="avatar-uploader"
						:action="'http://localhost:9999/user/uploadImg'"
						:show-file-list="false"
						:on-success="handleAvatarSuccess"
						:before-upload="beforeAvatarUpload"
						name="multipartFile">
					<img style="width: 100px;height: 100px" v-if="userInfo.avatar" :src="'http://localhost:8081/imgs/headImg/'+userInfo.avatar" class="avatar">
					<i v-else class="el-icon-plus avatar-uploader-icon"></i>
				</el-upload>
			</el-dialog>
		</div>
	</div>

	<script th:inline="javascript">
		var userInfo = [[${session.loginUser}]]
	</script>
<script>
    document.getElementById('howToGetTicket').onmouseenter = function(){
        document.getElementById('getTicketInfo').style.display = 'block'
    }
    document.getElementById('howToGetTicket').onmouseleave = function(){
        document.getElementById('getTicketInfo').style.display = 'none'
    }
	let personApp = new Vue({
		el:"#person",
		data:{
			headImagsVisible:false,
			uid:userInfo.id,
			userInfo:userInfo,
			total:'',
			avatar:'',
		},
		methods:{
			handleAvatarSuccess(res, file) {
				// console.log(res, file)
				this.userInfo.avatar = res.data
				this.updateAvatar(res)
				this.headImagsVisible=false
			},
			//上传之前拦截
			beforeAvatarUpload(file) {
				const isJPG = file.type === 'image/jpeg';
				const isLt2M = file.size / 1024 / 1024 < 2;
				if (!isJPG) {
					this.$message.error('上传头像图片只能是 JPG 格式!');
				}
				if (!isLt2M) {
					this.$message.error('上传头像图片大小不能超过 2MB!');
				}
				return isJPG && isLt2M;
			},
			initUser(){
				console.log("initUser++++++++++");
				let url = "http://localhost:9999/user/getLoginUser"
				axios.get(url,{params:{
						// 不用写东西
					}
				}).then((resp)=>{
					// this.userInfo = resp.data.data;
					// this.uid = this.userInfo.id;
				})
				
			},
			getCollectTotalList(){
				let url = 'http://localhost:9999/resource/getPersonCollectTotal'
				axios.get(url,{
					params:{
						uid:this.uid
					}
				}).then((resp)=>{
					this.total=resp.data.data
				})
			},
			updateAvatar(res){
				let url = 'http://localhost:9999/user/updateAvatar'
				console.log(res.data)
				console.log(this.uid)
				axios.get(url,{
					params:{
						avatar:res.data,
						uid:this.uid,
					}
				}).then((resp)=>{
					if(resp.data.code==200){
						alert(resp.data.msg)
					}else {
						alert(resp.data.msg)
					}
				})
			}
		},
		
		created(){
			this.initUser()
			this.getCollectTotalList()
		},
	})

</script>
</body>
</html>